<template>
	<view class="page">
		<!-- 搜索框 -->
		<view class="search-block">
			<view class="search-ico-wapper">
				<image src="../../static/icos/search.png" class="search-ico"></image>
			</view>
			<!-- 点击完成按钮时触发  @confirm -->
			<input placeholder="搜索预告" maxlength="10" class="search-text" confirm-type="search" @confirm="searchMe" />
		</view>
		<!-- 内容框 -->
		<view class="movie-list page-block">
			<view class="movie-wapper" v-for="trailer in trailerList">
				<!-- 图片动态绑定id -->
				<image :src="trailer.cover" :data-trailerId="trailer.id" @click="showTrailer" class="poster"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trailerList: [], // 猜你喜欢数据列表
				keywords: "", // 搜索的关键字
				page: 1, // 当前第几页
				totalPages: 1 // 总页数
			}
		},
		// 页面加载的时候就执行的回调
		onLoad() {
			var me = this;
			//请求加载数据
			uni.showLoading({
				mask: true,
				title: "请稍后..."
			});
			// 显示导航条加载动画
			uni.showNavigationBarLoading();
			// 获取请求网站全局的
			var serverUrl = me.serverUrl;
			// 查询猜你喜欢数据列表
			uni.request({
				url: serverUrl + '/search/list?keywords=&page=&pageSize=',
				method: "POST",
				success: (res) => {
					// 获取真实数据之前，务必判断状态是否为200
					if (res.data.status == 200) {
						// debugger;
						var trailerList = res.data.data.rows;
						me.trailerList = trailerList;
					}
				},
				//成功和失败都会调用的回调 关闭2个loading显示
				complete: () => {
					uni.hideNavigationBarLoading();
					uni.hideLoading();
				}
			})
		},
		// 页面滚动到底部的事件 页面的生命周期函数 不是scroll-view滚到底 用与上拉加载下一页
		// 加载下一页的数据 但是要判断是否到头  如果当前页和总页面相等或者大于 那就不分页  
		onReachBottom() {
			var me = this;
			var page = me.page + 1; // 查询下一页面，当前页数累加1
			var keywords = me.keywords; // 获得当前页面中data里的搜索值
			var totalPages = me.totalPages; // 获取总页数
			// 如果当前需要分页的分页数和总页数相等，就不分页
			if (page > totalPages) {
				return;
			}
			me.pagedTrailerList(keywords, page, 15); //调用查询数据的函数 传递关键字 页码 和一次显示多少条数据
		},
		methods: {
			//点击图片到详情页 根据id 跳转   获取自定义属性来获取id
			showTrailer(e) {
				var trailerId = e.currentTarget.dataset.trailerid;
				// 页面跳转接口api
				uni.navigateTo({
					url: "../movie/movie?trailerId=" + trailerId
				})
			},
			//调用下一页的数据 请求 根据对应的参数 
			pagedTrailerList(keywords, page, pageSize) {
				var me = this;
				// 开展laoding
				uni.showLoading({
					mask: true,
					title: "请稍后..."
				});
				uni.showNavigationBarLoading(); //也显示导航栏加载条

				var serverUrl = me.serverUrl;
				// 查询猜你喜欢数据列表  拼接上对应的参数
				uni.request({
					url: serverUrl + '/search/list?keywords=' + keywords +
						'&page=' + page +
						'&pageSize=' + pageSize,
					method: "POST",
					success: (res) => {
						// 获取真实数据之前，务必判断状态是否为200
						if (res.data.status == 200) { //新旧数据 要数组进行拼接
							// debugger;  调式bug 
							var tempList = res.data.data.rows;
							me.trailerList = me.trailerList.concat(tempList); //concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组
							me.totalPages = res.data.data.total; // 获取总页数
							me.page = page; // 覆盖当前页面里的page
						}
					},
					complete: () => { //失败和成功都要调用的函数 关闭显示loading
						uni.hideNavigationBarLoading();
						uni.hideLoading();
					}
				});
			},
			//点击搜索确定额时候input comit触发的函数
			searchMe(e) {
				var me = this;
				// 获取搜索的内容
				var value = e.detail.value; //输入的值
				me.keywords = value;
				me.trailerList = [];

				me.pagedTrailerList(value, 1, 15); //并且调用请求数据的值
			}
		}
	}
</script>

<style>
	@import url("search.css");
</style>
